<!--
 * @Author: xuzehan 123@qq.com
 * @Date: 2023-06-14 13:43:09
 * @LastEditors: xuzehan 123@qq.com
 * @LastEditTime: 2023-07-03 10:06:39
 * @FilePath: \nms-vue\src\views\networkStatus\modules\telemetry.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div class="telemetry">
    <div class="topHandleBox">
      <div class="queryDIv">
        <div >
          <a-select placeholder="请选择指控车" style="width:200px;" @change="changeCar" v-model="carInfo">
            <a-select-option
              :value="item.identificationCode"
              v-for="item in options"
              :key="item.id"
            >{{ item.name }} ({{item.identificationCode}})</a-select-option>
          </a-select>
          <!-- <a-button type="primary" style="margin-left: 10px" @click="onChangeCar">状态查询</a-button> -->
        </div>
        <div class="resultBox">
          <div
            v-for="(item,index) in  ballList"
            :key="item.id"
            @click="toggleClass(index+1,item)"
            class="ballBox ASIC"
          >
            <div class="ballTitle">导弹{{item.identificationCode}}网络状态</div>
          </div>
        </div>
      </div>

      <h2 class="Time"></h2>
      <!-- <h2 class="Time">{{ data[0].time }}</h2> -->
    </div>
    <div class="bodyBox">
      <div class="infoBox">
        <div class="infoDiv-buleBorder">
          <a-descriptions title :column="1" class="color-des">
            <a-descriptions-item label="上行链路通信频点">{{form.frequencyPoint?form.frequencyPoint:"*"}}号频点</a-descriptions-item>
            <a-descriptions-item
              label="上行链路通信速率"
            >{{form.frequencyPoint?formatksps(form.upksps,'up') :"*"}}</a-descriptions-item>
            <a-descriptions-item
              label="下行链路通信速率"
            >{{form.frequencyPoint?formatksps(form.downksps,'down') :"*"}}</a-descriptions-item>
          </a-descriptions>
        </div>
        <!-- <div class="infoDiv-buleBorders"> -->
          <!-- 仪表盘 -->
          <!-- <div id="main"></div> -->
          <!-- <a-descriptions title :column="1" class="color-des">
          <a-descriptions-item label="导弹频点">F1</a-descriptions-item>
          <a-descriptions-item label="导弹速率">1810</a-descriptions-item>
          <a-descriptions-item label="导弹时间">2023-03-02</a-descriptions-item>
          </a-descriptions>-->
        <!-- </div> -->

        <div class="infoDiv-buleBorder">
          <div class="udBox">
            <span>导弹时间</span>
            <p>{{form.sendTimestamp?form.sendTimestamp:"* * *"}}</p>
          </div>

        </div>
      </div>
      <div class="infoBox">
        <div class="infoDiv-buleBorder">
          <a-descriptions title :column="1" class="color-des">
            <a-descriptions-item
              label="信噪比"
            >{{typeof(form.SignalToNoiseRatio)=='number'?form.SignalToNoiseRatio:'*' }}dBm</a-descriptions-item>
            <a-descriptions-item
              label="载波同步状态"
            >{{typeof(form.carrier)=='string'?form.carrier==1?"同步":'未同步':"*"}}</a-descriptions-item>
            <a-descriptions-item
              label="位同步状态"
            >{{typeof(form.position)=='string'?form.position==1?"同步":'未同步':"*"}}</a-descriptions-item>
            <a-descriptions-item
              label="帧同步状态"
            >{{typeof(form.frame)=='string'?form.frame==1?"同步":'未同步':"*"}}</a-descriptions-item>
          </a-descriptions>
        </div>
        <div class="infoDiv-buleBorder">
          <a-descriptions title="导弹位置信息" :column="1" class="color-des">
            <a-descriptions-item label="导弹经度">{{form.longitude?form.longitude:"*"}}</a-descriptions-item>
            <a-descriptions-item label="导弹纬度">{{form.latitude?form.latitude:"*"}}</a-descriptions-item>
            <a-descriptions-item label="导弹高度">{{form.height?form.height:"*"}}</a-descriptions-item>
          </a-descriptions>
        </div>
        <div class="infoDiv-buleBorder">
          <a-descriptions title="导弹速度信息" :column="1" class="color-des">
            <a-descriptions-item label="导弹速度Vx">{{form.vx?form.vx:"*"}}km/s</a-descriptions-item>
            <a-descriptions-item label="导弹速度Vy">{{form.vy?form.vy:"*"}}km/s</a-descriptions-item>
            <a-descriptions-item label="导弹速度Vz">{{form.vz?form.vz:"*"}}km/s</a-descriptions-item>
          </a-descriptions>
        </div>
      </div>

    </div>
  <!--    <a-table :columns="columns" :data-source="data" bordered size="middle" />-->
  </div>
</template>

<script>
const columns = [
  {
    title: '序号',
    dataIndex: '',
    key: 'rowIndex',
    width: 80,
    align: 'center',
    customRender: function (t, r, index) {
      return parseInt(index) + 1
    },
  },
  {
    title: '时间',
    dataIndex: 'time',
    key: 'time',
    // slots: { title: 'customTitle' },
    // scopedSlots: { customRender: 'time' },
  },
  {
    title: '导弹识别码',
    dataIndex: 'code',
    key: 'code',
  },
  {
    title: '导弹经度(°)',
    dataIndex: 'lng',
    key: 'lng',
  },
  {
    title: '导弹纬度(°)',
    dataIndex: 'lat',
    key: 'lat',
  },
  {
    title: '导弹高度(m)',
    key: 'hei',
    dataIndex: 'hei',
    scopedSlots: { customRender: 'hei' },
  },
  {
    title: 'Vx(m/s)',
    dataIndex: 'Vx',
    key: 'Vx',
  },
  {
    title: 'Vy(m/s)',
    dataIndex: 'Vy',
    key: 'Vy',
  },
  {
    title: 'Vz(m/s)',
    dataIndex: 'Vz',
    key: 'Vz',
  },
]

const data = [
  {
    key: '1',
    time: '2023-04-15 15:23:56',
    lng: 102,
    lat: 32,
    hei: 1251,
    Vy: '2',
    Vx: '3',
    Vz: '4',
    code: '1001',
  },
  // {
  //   key: '2',
  //   time: '2023-04-15 15:23:56',
  //   lng: 102,
  //   lat: 32,
  //   hei: 1051,
  //   Vy: '23',
  //   Vx: '31',
  //   Vz: '34',
  //   code: '1002',
  // },
  // {
  //   key: '3',
  //   time: '2023-04-15 15:23:56',
  //   lng: 112,
  //   lat: 36,
  //   hei: 1251,
  //   Vy: '24',
  //   Vx: '36',
  //   Vz: '48',
  //   code: '1003',
  // },
  // {
  //   key: '4',
  //   time: '2023-04-15 15:23:56',
  //   lng: 102,
  //   lat: 32,
  //   hei: 1051,
  //   Vy: '23',
  //   Vx: '31',
  //   Vz: '34',
  //   code: '1004',
  // },
  // {
  //   key: '5',
  //   time: '2023-04-15 15:23:56',
  //   lng: 112,
  //   lat: 36,
  //   hei: 1251,
  //   Vy: '24',
  //   Vx: '36',
  //   Vz: '48',
  //   code: '1005',
  // },
  // {
  //   key: '6',
  //   time: '2023-04-15 15:23:56',
  //   lng: 102,
  //   lat: 32,
  //   hei: 1051,
  //   Vy: '23',
  //   Vx: '31',
  //   Vz: '34',
  //   code: '1006',
  // },
  // {
  //   key: '7',
  //   time: '2023-04-15 15:23:56',
  //   lng: 112,
  //   lat: 36,
  //   hei: 1251,
  //   Vy: '24',
  //   Vx: '36',
  //   Vz: '48',
  //   code: '1007',
  // },
]

import * as echarts from 'echarts'
import { mapGetters } from 'vuex'
import { getAction, httpAction } from '@/api/manage.js'
import { Turns } from '@/utils/util'
export default {
  computed: {
    ...mapGetters(['websocketMsg']),
    websocketMsg() {
      return this.$store.state.user.websocketMsg
    },
  },
  watch: {
    websocketMsg: {
      handler(val) {
        // 需要进行的操作
        let msg = JSON.parse(val)
        if (msg.cmd == 'MISSILE_TELEMETRY_INFO') {
          this.parseTelemetryInfo(msg.msgTxt);
        }
        // val = { "cmd": "MISSILE_TELEMETRY_INFO", "msgTxt": "{\"createBy\":\"admin\",\"createTime\":1700100493081,\"fightDemandId\":\"1706510450151411713\",\"height\":\"8000.000000\",\"id\":\"1724972609000513538\",\"identificationCode\":\"2101\",\"latitude\":\"35.000000\",\"longitude\":\"110.000000\",\"missileTime\":\"60010064\",\"ncvIdentificationCode\":\"2100\",\"sendTimestamp\":1672502400000,\"statusWordOne\":\"0101\",\"sysOrgCode\":\"A01\",\"vx\":\"0.000020\",\"vy\":\"0.000020\",\"vz\":\"0.000004\"}" }
        // let msg = JSON.parse(val)
        // if (msg.cmd == 'MISSILE_TELEMETRY_INFO') {
        //   let data = msg.msgTxt
        //   this.form = Object.assign({}, data)
        // } else { return }


        console.log(val, 'val----websocket推送的全局数据')

      },
    },
  },
  data() {
    return {
      form: {},
      queryParam: {},
      data,
      columns,
      isorter: {
        order: 'asc',
        column: 'creat_time',
      },
      activeKey: -1,
      activeBall: "",
      options: [],
      ballList: [{
        ballName: '导弹',
        status: '*',
        id: 1,
        eqStatus: "*",
        Identification: '1',
        carrier: "*",
        position: "*",
        frame: "*",
      },],
      carInfo: undefined,
      url: {
        getLatestPackageGridValues: '/grid/nmcPackageGridValue/getLatestPackageGridValues',
        getCommandVehicleMissileNetworkQueryResponse: "/missileNetworkQuery/nmcMissileNetworkQuery/getCommandVehicleMissileNetworkQueryResponse",
        sendPackage: '/channel/nmcChannelInfo/sendPackage',
        getNmcPackageGridValueByCode: '/grid/nmcPackageGridValue/code',
        carlist: '/commandVehicle/nmcCommandVehicle/getByCurrentDayOfCommandVehicleExcludeRetired',
        getMissile: '/missile/nmcMissileInfo/getByNcvIdentificationCode'
      },
      upKsps: [
        { label: '0001', value: '1.5ksps' },
        { label: '0010', value: '3ksps' },
        { label: '0011', value: '6ksps' },
      ],
      downKsps: [
        { label: '0001', value: '3ksps' },
        { label: '0010', value: '12ksps' },
        { label: '0011', value: '24ksps' },
        { label: '0100', value: '48ksps' },
        { label: '0101', value: '96ksps' },
      ]
    }
  },

  activated() {
    // this.initChart()
    this.getCarList()
  },
  mounted() {
    // this.initChart()
    this.getCarList()

    // console.log(JSON.parse(msg.msgTxt))

  },
  methods: {
    /**
     * 解析websocket返回的数据
     * @param value 数据
     */
    parseTelemetryInfo(value) {
      let data = JSON.parse(value)
      if (data.identificationCode != this.activeBall) {
        this.form = {}
        return;
      }

      // 先清空一次数据
      this.form = {};
      if (data.identificationCode.startsWith("2")) {
        // 信噪比
        this.form.SignalToNoiseRatio = parseInt(data.signalToNoiseRatio);
        // 同步状态
        let syncStatusBin = Turns(data.syncStatus, 2);
        // 此处想看懂需要看协议
        let syncStatusArr = syncStatusBin.split("").reverse();
        // 载波同步
        this.form.carrier = syncStatusArr[2];
        // 位同步
        this.form.position = syncStatusArr[1];
        // 帧同步
        this.form.frame = syncStatusArr[0];
      } else if (data.identificationCode.startsWith("8")) {
        this.form = Object.assign({}, data)
        // data.statusWordTwo = '0311'
        let temp = Turns(data.statusWordTwo, 2).split('')
        temp.reverse() //
        let str = temp.join('')
        let ratio = str.slice(0, 8)
        this.form.SignalToNoiseRatio = parseInt(ratio, 2)    //信噪比
        this.form.carrier = str[8] //载波同步
        this.form.position = str[9] //位同步
        this.form.frame = str[10] //帧同步
        // data.statusWordOne = '0101'
        let tempData = data.statusWordOne
        let str1 = tempData.slice(0, 2)
        this.form.frequencyPoint = parseInt(str1, 16)
        this.form.upksps = tempData[2]
        this.form.downksps = tempData[3]
        this.form.frequencyPoint = parseInt(tempData.slice(0, 2), 16)
        // console.log(tempData.slice(0, 2), 'str', parseInt(tempData.slice(0, 2), 16))
      }
    },
    formatksps(val, type) {
      let data = Turns(val, 2)
      if (type == 'up') {
        return this.upKsps.find(i => i.label == data) ? this.upKsps.find(i => i.label == data).value : "*"
      } else if (type == 'down') {
        return this.downKsps.find(i => i.label == data) ? this.downKsps.find(i => i.label == data).value : "*"
      }
    },
    changeCar(val) {
      // this.ballList = this.options.find(i => i.identificationCode == val).nmcMissileInfos

      getAction(this.url.getMissile, { ncvIdentificationCode: val }).then(res => {
        this.ballList = res.result
      })

      this.toggleClass(1, this.ballList[0])
    },
    getCarList() {
      getAction(this.url.carlist, { pageSize: -1 }).then((res) => {
        console.log(res.result, 'res.result')
        this.options = res.result
      })
    },
    toggleClass(index, item) {
      this.form = {}
      //点击哪个，哪个亮。请求该导弹的数据 并且更新界面
      let nodelist = document.getElementsByClassName('ballBox')
      // console.log(nodelist, '节点.classList.remove("类名")')
      let arr = [...nodelist];
      arr.forEach(element => {
        if (element.classList.contains('blueBox')) {
          // console.log('包含 test 这个class');
          element.classList.remove("blueBox")
        }
      });
      if (item) {
        this.activeBall = item.identificationCode
      }
      if (index) {
        arr[index - 1].classList.add("blueBox")
      }
      this.activeKey = index
      return
      let data = {
        packageCode: "20弹载终端网络状态应答",
        businessId: this.carInfo,
        processDefineKey: processDefineKey.MissileNetworkQueryResponseHandleImplKey
      }
      getAction(this.url.getLatestPackageGridValues, data).then(res => {

        let result = res.result
        let data = JSON.parse(result.find(i => i.gridCode == "20-导弹信息组").parseJsonString)
        let temp = data.find(i => i[0] == this.activeBall)
        this.model.identificationCode = temp[0] //识别码
        this.model.networkState = temp[1] //在网状态
        this.model.deviceState = temp[2] //设备状态
        this.model.useDfTotal = temp[3] //信道数
        this.model.useDfInfo = temp[4]  //信道号
        // this.chartValue = temp[5] //速率档
        let tempData = Turns(temp[5], 2)
        let arr = tempData.split(/(?=(?:........)*$)/)
        console.log(arr, 'arr')
        let chartDataArr = arr[0].split('').reverse()
        chartDataArr.forEach((i, index) => {
          if (i == 1) {
            this.chartValue = (index + 1) * 2
          }
        })
        // this.initChart()
        this.model.frame = arr[1][7] //帧同步
        this.model.position = arr[1][6] //位同步
        this.model.carrier = arr[1][5] //载波同步
        this.model.noiseRatio = arr[1].slice(0, 5)
      })



    },
    initChart() {

      var chartDom = document.getElementById('main');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        // graphic: [
        //   {
        //     type: "image",
        //     left: 105,
        //     top: 26,
        //     z: 0,
        //     bounding: "raw",
        //     rotation: 0, //旋转
        //     origin: [0, 0], //中心点
        //     scale: [1, 1], //缩放
        //     style: {
        //       // 背景图
        //       image: require("@/assets/3.png"),
        //       opacity: 1,
        //     },
        //   },
        // ],
        series: [
          {
            type: 'gauge',
            startAngle: 230,
            endAngle: -50,
            center: ['50%', '50%'],
            radius: '90%',
            min: 0,
            max: 1,
            splitNumber: 8,
            legendHoverLink: true,
            emphasis: {
              disabled: false,
              itemStyle: {
                borderColor: '#e3e3e'
              }
            },
            axisLine: {
              shadowColor: 'rgba(44,71,199, 0.7)',
              shadowBlur: 10,
              lineStyle: {
                width: 50,
                // background
                color: [
                  [0.25, 'rgba(21,42,164, 0.5)'],
                  [0.5, 'rgba(97, 255, 185, 0.4)'],
                  [0.75, '#468EFD'],
                  [1, '#70C27E']
                ]
              }
            },
            pointer: {
              icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
              length: '55%',
              width: 10,
              offsetCenter: [0, 0],
              itemStyle: {
                color: '#26fbf3'
              }
            },
            axisTick: {
              length: 0,
              lineStyle: {
                color: 'auto',
                width: 2
              }
            },
            splitLine: {
              length: 0,
              lineStyle: {
                color: 'auto',
                width: 5
              }
            },
            axisLabel: {
              color: '#26fbf3',
              fontSize: 16,
              distance: 19,
              rotate: 'tangential',
              formatter: function (value) {
                if (value === 0.875) {
                  return '4kbps';
                } else if (value === 0.625) {
                  return '36kbps';
                } else if (value === 0.375) {
                  return '96kbps';
                } else if (value === 0.125) {
                  return '2048kbps';
                }
                return '';
              },
              textStyle: {
                position: 'inside'  // 刻度文字在刻度线外部显示
              }
            },
            title: {
              offsetCenter: [0, '80%'],
              fontSize: 16,
              color: '#26fbf3'
            },
            detail: {
              fontSize: 22,
              offsetCenter: [0, '100%'],
              valueAnimation: true,
              formatter: function (value) {
                // return Math.round(value) + '';
                if (value == 0.375) {
                  return '96kbps'
                } else {
                  return ''
                }
              },
              color: '#26fbf3'
            },
            data: [
              {
                value: 0.375,
                name: '上行速率'
              }
            ]
          }
        ]
      };
      option && myChart.setOption(option);
    },
  }
}
</script>

<style lang="less" scoped>
#main {
  width: 450px;
  height: 300px;
}

.udBox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  span {
    display: inline-block !important;
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 20px;
    color: #b3f5ff;
    padding-left: 10px;
    background: rgba(10, 44, 81, 0.6);
  }
  p {
    width: 100%;
    height: 200px;
    line-height: 200px;
    font-size: 30px;
    color: #26fbf3;
    // background: rgba(6, 31, 71, 0.8);
    background: linear-gradient(to right, rgba(11, 50, 85, 0.8), rgba(141, 136, 136, 0.01));

    // background: pink;
    text-align: center;
    margin-top: 15px;
  }
}
.Time {
  color: rgb(74, 208, 248);
  text-align: right;
  width: 100%;
  padding-right: 30px;
}
.infoDiv-buleBorder {
  margin: 20px;
  padding: 15px;
  width: 100%;
  min-height: 300px;
  border: 1px solid #1a7683;
  position: relative;
  display: flex;
  background: rgba(6, 31, 71, 0.5);
  flex-direction: row; /*默认也是row可以不写*/
  justify-content: center;
  align-items: center;
}
.bodyBox {
  border: 1px solid #1a7683;
  padding: 10px;
}
.infoDiv-buleBorder:before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 5px;
  height: 8px;
  background: #44defd;
  box-sizing: border-box;
}
.infoDiv-buleBorder:after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  width: 5px;
  height: 8px;
  background: #44defd;
  box-sizing: border-box;
}
.telemetry {
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
  // height: calc(100vh - 160px);
  .topHandleBox {
    width: 100%;
    display: flex;
    margin-top: 0;
    justify-content: space-between;
    .queryDIv {
      display: flex;
      flex-wrap: wrap;
    }
    .resultBox {
        display: flex;
        padding: 15px auto;
        .ballBox {
          margin: 15px;
          margin-bottom: 0;
          padding: 16px;
          cursor: pointer;
        }
        .blueBox {
          // background: rgba(38, 251, 243, 0.6);
          color: rgb(76, 228, 248);
          border: 1px solid #26fbf3;
        }
      }
  }
}
.ASIC {
  background: url('~@/assets/img/C/ASIC带点背景.png') no-repeat;
  background-size: 100% 100%;
}

.ballInfo {
  width: 100%;
  // min-height: 800px;

  color: #b3f5ff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: space-between;
  padding: 25px;
  background: url('~@/assets/img/C/homePageChartEmergency.png') no-repeat;
  background-size: 100% 100%;
  .ASIC {
    min-width: 360px;
  }
  .t_dBox {
    // padding: 25px;
    display: flex;
    flex-direction: column;
    justify-content: space-around !important;
    align-items: center !important;

    span {
      display: block;
      width: 100%;
      line-height: 50px;
      font-size: 24px;
      background: rgba(10, 44, 81, 0.6);
      // border: 1px solid;

      // margin-bottom: 50px;
      // margin-top: 30px;
      // padding-left: 20px;
      text-align: center;
    }
    p {
      width: 100%;
      line-height: 150px;
      font-size: 70px;
      text-align: center;
      // border: 1px solid;

      color: #26fbf3;
      background: rgba(10, 44, 81, 0.3);
      margin: 0;
    }
  }
  .ASIC {
    // min-width: 370px;
    width: 28%;
    min-height: 300px;
    padding: 15px 40px;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: space-around;
    .box_signal_level_box {
      background: url('~@/assets/img/C/box_signal_level_box.png') no-repeat;
      background-size: 100% 100%;
      color: #b3f5ff;
      font-size: 28px;
      line-height: 100px;
      text-align: center;
    }
  }
  .topDiv,
  .bottomDiv {
    width: 100%;
    display: flex;
    justify-content: space-between;
    margin: 20px 0px;
  }
}

</style>
<style>

.telemetry .bodyBox .infoBox {
  display: flex;
  justify-content: space-around;
}
.telemetry .infoDiv-buleBorder  .color-des {
  width: 85%;
}
.telemetry  .infoDiv-buleBorder .color-des .ant-descriptions-item {
  height: 50px !important;
  line-height: 50px !important;
}
.telemetry .infoDiv-buleBorder  .color-des .ant-descriptions-title {
  background: rgba(10, 44, 81, 0.6);
  height: 50px !important;
  padding-left: 20px;
  line-height: 50px !important;
  color: #b3f5ff;
}
.telemetry .infoDiv-buleBorder  .color-des .ant-descriptions-item-label {
  background: rgba(10, 44, 81, 0.6);
  width: 55%;
  min-width: 145px;
  height: 50px !important;
  line-height: 50px !important;
  text-align: center;
  color: #b3f5ff;
}
.telemetry .infoDiv-buleBorder .color-des .ant-descriptions-item-content {
  height: 50px !important;
  line-height: 50px !important;
  background: linear-gradient(to right, rgba(11, 50, 85, 0.8), rgba(141, 136, 136, 0.01));
  width: 45%;
  padding: 0px 10px;
  color: #26fbf3;
}

</style>
